<template>
  <div id="centerRight1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <div class="d-flex" style="margin-top: 5px; margin-bottom: 10px">
          <span
            class="text mx-2"
            style="font-size: 18px; color: #108b96; font-weight: 600"
            >营业额数据统计</span
          >
        </div>
      </div>
      <div class="d-flex jc-center body-box flex-column" style="">
        <!-- <div
          style="
            display: flex;
            width: 100%;
            justify-content: space-between;
            padding: 0 30px;
          "
        >
          <div style="margin-top: 20px">
            <div style="color: #096d70; font-size: 20px">营业总额</div>
            <div style="margin-top: 20px">
              <dv-digital-flop
                :config="configNum"
                style="width: 200px; height: 50px; text-align: start"
              />
            </div>
          </div>
          <div style="margin-top: 20px">
            <div style="color: #096d70; font-size: 20px">订单总量</div>
            <div style="margin-top: 20px">
              <dv-digital-flop
                :config="configOrder"
                style="width: 200px; height: 50px; text-align: start"
              />
            </div>
          </div>
        </div> -->

        <dv-scroll-board class="dv-scr-board" :config="config" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      configNum: {
        number: [66666],
        content: "{nt}",
        textAlign: "left",
      },
      configOrder: { number: [5454], content: "{nt}", textAlign: "left" },

      config: {
        data: [
          ["2021年05月20日", "某地", '<span style="color:#37a2da">55单</span>'],
          ["2021年05月20日", "某地", '<span style="color:#37a2da">56单</span>'],
          ["2021年05月20日", "某地", '<span style="color:#37a2da">57单</span>'],
          ["2021年05月20日", "某地", '<span style="color:#37a2da">58单</span>'],
          ["2021年05月20日", "某地", '<span style="color:#37a2da">59单</span>'],
          ["2021年05月20日", "某地", '<span style="color:#37a2da">65单</span>'],
          ["2021年05月20日", "某地", '<span style="color:#37a2da">77单</span>'],
          ["2021年05月20日", "某地", '<span style="color:#37a2da">88单</span>'],
        ],

        oddRowBGC: "#0f1325", //奇数行
        evenRowBGC: "#171c33", //偶数行

        align: ["center"],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
$box-height: 220px;
$box-width: 750px;
#centerRight1 {
  padding: 16px 14px;
  padding-top: 20px;

  width: $box-width;
  border-radius: 5px;

  .bg-color-black {
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .body-box {
    border-radius: 10px;
    overflow: hidden;
    .dv-scr-board {
      width: 100%;
      height: 169px;
    }
  }
}
:deep(.dv-scroll-board .rows .row-item) {
  font-size: 18 !important;
}
// :deep(.dv-scroll-board .rows .row-item) {
//   height: 30px !important;
// }
</style>
